<template>
    <div>
        <el-table :data="list" style="width: 100%" max-height="500">
            <el-table-column fixed prop="orderId" label="订单id" width="150">
            </el-table-column>

            <!-- <el-table-column prop="userId" label="用户名" width="120" :formatter="formatUserName">
            </el-table-column> -->

            <el-table-column prop="orderName" label="订单名" width="120">
            </el-table-column>
            <el-table-column prop="orderStatus" label="订单状态" width="120" :formatter="formatStatus">
            </el-table-column>
            <el-table-column prop="orderCreateTime" label="下单时间" width="120" show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="transactionType" label="交易类型" width="120" :formatter="formatType">
            </el-table-column>
            <el-table-column prop="orderMerchatName" label="商户全称" width="120">
            </el-table-column>
            <el-table-column prop="acquirer" label="供货商" width="160">
            </el-table-column>
            <el-table-column prop="orderNumber" label="订单编号" width="150">
            </el-table-column>
            <el-table-column prop="orderTotalAmount" label="交易金额" width="120">
            </el-table-column>
            <el-table-column prop="isDiscount" label="是否优惠" width="120" :formatter="formatDiscount">
            </el-table-column>

        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageDto.page" :page-sizes="[5, 10, 20, 30, 50]" :page-size="pageDto.size"
                layout="total, sizes, prev, pager, next, jumper" :total="totalSize">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name: "roomtable",
    data() {
        return {
            pageDto: { page: 1, size: 10, orders: {} },
            list: [],
            displayList: [],
            totalSize:0,
        }
    },
    methods: {
        // element ui
        // 分页
        handleSizeChange(val) {
            this.pageDto.size = val;
            this.queryByPage();
        },
        handleCurrentChange(val) {
            this.pageDto.page = val;
            this.queryByPage();
        },
        // 订单状态
        formatStatus(data) {
            // console.log(data.orderStatus);
            switch (data.orderStatus) {
                case 0:
                    return "未支付"
                    break;
                case 1:
                    return "已取消"
                    break;
                case 2:
                    return "已支付"
                    break;
                    case 3:
                    return "已退款"
                    break;
                    case 4:
                    return "未出行"
                    break;
                    case 5:
                    return "已完成"
                    break;
                default:
                    return "未知状态"
                    break;
            }
        },
        // 交易类型
        formatType(data) {
            // console.log(data.orderStatus);
            switch (data.transactionType) {
                case 1:
                    return "景区"
                    break;
                case 2:
                    return "酒店"
                    break;
                case 3:
                    return "套餐"
                    break;
                default:
                    return "未知交易类型"
                    break;
            }
        },
        // 是否优惠
        formatDiscount(data) {
            // console.log(data.orderStatus);
            switch (data.isDiscount) {
                case 0:
                    return "否"
                    break;
                case 1:
                    return "是"
                    break;
                default:
                    return "未知"
                    break;
            }
        },

        // 请求参数
        queryByPage() {
            this.$api.ordersApi.queryByPage(this.pageDto).then(res => {
                this.list = res.data.data.list;
                this.totalSize = res.data.data.total;
            })
        },
    },
    mounted() {
        this.queryByPage();
    },
}
</script>